<template>
  <!-- 添加 mask-click 属性以支持遮罩点击关闭 -->
  <uni-popup ref="passwordPopup" type="center" :mask-click="true" @maskClick="closeModal">
    <view class="password-modal">
      <view class="modal-header">
        <view class="modal-icon">
          <image src="/static/icon-lock.png" class="lock-icon" />
        </view>
        <text class="modal-title">{{title}}</text>
        <text class="modal-subtitle">请完成以下验证以修改{{title}}</text>
      </view>
      
      <view class="modal-body">
        <view class="input-group">
          <image src="/static/icon-password.png" class="input-icon" />
          <input 
            class="input-field" 
            type="password" 
            v-model="oldPassword" 
            :placeholder="'请输入'+oldpassword"
            placeholder-style="color: #aaa;"
            password
          />
        </view>
        
        <view class="input-group">
          <image src="/static/icon-password.png" class="input-icon" />
          <input 
            class="input-field" 
            type="password" 
            v-model="newPassword" 
            :placeholder="'请输入'+newpassword"
            placeholder-style="color: #aaa;"
            password
          />
        </view>
        
        <view class="input-group">
          <image src="/static/icon-password.png" class="input-icon" />
          <input 
            class="input-field" 
            type="password" 
            v-model="confirmPassword" 
            :placeholder="'再输入'+newpassword"
            placeholder-style="color: #aaa;"
            password
          />
        </view>
        
        <!-- <view class="input-group">
          <image src="/static/icon-sms.png" class="input-icon" />
          <view class="sms-input">
            <input 
              class="input-field sms-code" 
              type="number" 
              v-model="smsCode" 
              placeholder-style="color: #aaa;"
              maxlength="6"
            />
            <button 
              class="send-btn" 
              :disabled="isCountingDown" 
              @tap="sendSmsCode"
              :class="{ disabled: isCountingDown }"
            >
              {{ countdownText }}
            </button>
          </view>
        </view> -->
      </view>
      
      <view class="modal-footer">
        <button class="footer-btn cancel-btn" @tap="closeModal">取消</button>
        <button class="footer-btn confirm-btn" @tap="confirmChange">确认修改</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    title:String,
	oldpassword:String,
	newpassword:String,
  },
  data() {
    return {
      oldPassword: "",      // 旧密码
      newPassword: "",      // 新密码
      confirmPassword: "",  // 确认密码
      smsCode: "",          // 短信验证码
      isCountingDown: false, // 倒计时状态
      countdown: 60,        // 倒计时秒数
      countdownTimer: null  // 倒计时计时器
    };
  },
  computed: {
    // 倒计时显示文本
    countdownText() {
      return this.isCountingDown ? `${this.countdown}秒后重发` : "获取验证码";
    }
  },
  methods: {
    // 打开弹窗（供父组件调用）
    open() {
      this.resetForm();
      this.$refs.passwordPopup.open();
    },
    
    // 关闭弹窗
    closeModal() {
      this.$refs.passwordPopup.close();
      this.resetForm();
      this.$emit('close');
    },
    
    // 发送短信验证码
    sendSmsCode() {
      if (this.isCountingDown) return;
      
      // 通知父组件发送验证码
      this.$emit('send-sms');
      
      // 开始倒计时
      this.isCountingDown = true;
      this.countdownTimer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.countdownTimer);
          this.isCountingDown = false;
          this.countdown = 60;
        }
      }, 1000);
    },
    
    // 确认修改
    confirmChange() {
      // 表单验证
      if (!this.oldPassword) {
        uni.showToast({ title: "请输入旧密码", icon: "none" });
        return;
      }
      
      if (!this.newPassword || this.newPassword.length < 6) {
        uni.showToast({ title: "新密码长度至少6位", icon: "none" });
        return;
      }
      
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({ title: "两次输入的新密码不一致", icon: "none" });
        return;
      }
      
      // if (!this.smsCode || this.smsCode.length !== 6) {
      //   uni.showToast({ title: "请输入6位验证码", icon: "none" });
      //   return;
      // }
      
      // 将数据传递给父组件处理
      this.$emit('confirm', {
        oldPassword: this.oldPassword,
        newPassword: this.newPassword,
		confirmPassword:this.confirmPassword,
        // smsCode: this.smsCode
      });
    },
    
    // 重置表单
    resetForm() {
      this.oldPassword = "";
      this.newPassword = "";
      this.confirmPassword = "";
      this.smsCode = "";
      
      // 清除倒计时
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.isCountingDown = false;
        this.countdown = 60;
      }
    }
  }
};
</script>

<style scoped>
/* 弹窗样式 - 优化版 */
.password-modal {
  width: 85vw;
  max-width: 650rpx;
  background: linear-gradient(135deg, #f8f9fd 0%, #ffffff 100%);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid #e8ebf5;
}

.modal-header {
  padding: 40rpx 30rpx 30rpx;
  text-align: center;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.modal-icon {
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20rpx;
}

.lock-icon {
  width: 50rpx;
  height: 50rpx;
  filter: brightness(0) invert(1);
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 10rpx;
}

.modal-subtitle {
  font-size: 26rpx;
  opacity: 0.9;
  display: block;
}

.modal-body {
  padding: 40rpx 30rpx 30rpx;
  max-height: 70vh;
  overflow-y: auto;
}

.input-group {
  margin-bottom: 35rpx;
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;
  background: white;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #e8ebf5;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.input-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
  opacity: 0.7;
}

.input-field {
  height: 90rpx;
  padding: 0 15rpx;
  font-size: 32rpx;
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #333;
}

.sms-input {
  display: flex;
  align-items: center;
  gap: 20rpx;
  width: 100%;
}

.sms-code {
  flex: 1;
}

.send-btn {
  min-width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  border: none;
  transition: all 0.3s;
}

.send-btn.disabled {
  background: #c0c0c0;
  color: #f0f0f0;
}

.send-btn:not(.disabled):active {
  opacity: 0.9;
  transform: scale(0.98);
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: white;
}

.footer-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 0;
  font-size: 32rpx;
  font-weight: 500;
  background: transparent;
  position: relative;
  border: none;
  transition: background-color 0.3s;
}

.cancel-btn {
  color: #666;
}

.cancel-btn:active {
  background-color: #f5f5f5;
}

.confirm-btn {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

.confirm-btn:active {
  opacity: 0.9;
}

/* 取消按钮右侧分隔线 */
.cancel-btn::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20rpx;
  bottom: 20rpx;
  width: 1rpx;
  background-color: #eee;
}

/* 小屏幕适配 */
@media (max-width: 320px) {
  .password-modal {
    width: 90vw;
  }
  
  .input-field {
    height: 80rpx;
    font-size: 28rpx;
  }
  
  .send-btn {
    min-width: 180rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
  }
  
  .modal-body {
    padding: 30rpx 20rpx 20rpx;
  }
}
</style>